<template>
  <div class="model-lightweight">
    <!-- 地形数据 -->
    <div class="terrain-data">
      <div class="svg-box">
        <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="250">
          <defs>
            <marker id="arrow" markerWidth="10" markerHeight="10" refX="7" refY="2" orient="auto"
              markerUnits="strokeWidth">
              <path d="M0,0 L0,4 L10,2 z" fill="#268DFB" />
            </marker>
          </defs>
          <line x1="300" y1="125" x2="350" y2="125" stroke="#268DFB" stroke-width="3" />
          <line x1="350" y1="170" x2="350" y2="90" stroke="#268DFB" stroke-width="3" />
          <line x1="349" y1="91" x2="490" y2="91" stroke="#268DFB" stroke-width="3" marker-end="url(#arrow)" />
          <line x1="349" y1="169" x2="490" y2="169" stroke="#268DFB" stroke-width="3" marker-end="url(#arrow)" />
          <line x1="650" y1="165" x2="835" y2="165" stroke="#268DFB" stroke-width="3" marker-end="url(#arrow)" />
          <line x1="650" y1="85" x2="835" y2="85" stroke="#268DFB" stroke-width="3" marker-end="url(#arrow)" />
        </svg>
      </div>
      <div class="title">地形数据</div>
      <div class="sort">
        <div class="type">
          DEM、DSM数据
          <br>
          tiff/img
        </div>
        <div class="type">
          DOM数据
          <br>
          tiff/img
        </div>
      </div>
      <div class="detail">
        <div class="button" @click="skip('demHandle')">
          DEM切片、压缩
          <br>
          .terrain
        </div>
        <div class="button" @click="skip('domHandle')">
          DOM切片、压缩
          <br>
          .png
        </div>
      </div>
    </div>
    <!-- 倾斜摄影三维模型数据 -->
    <div class="terrain-data">
      <div class="svg-box">
        <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="250">
          <defs>
            <marker id="arrow" markerWidth="10" markerHeight="10" refX="7" refY="2" orient="auto"
              markerUnits="strokeWidth">
              <path d="M0,0 L0,4 L10,2 z" fill="#268DFB" />
            </marker>
          </defs>
          <line x1="300" y1="125" x2="490" y2="125" stroke="#268DFB" stroke-width="3" marker-end="url(#arrow)" />
          <line x1="650" y1="125" x2="835" y2="125" stroke="#268DFB" stroke-width="3" marker-end="url(#arrow)" />
        </svg>
      </div>
      <div class="title">倾斜摄影三维模型数据</div>
      <div class="sort">
        <div class="type">
          mesh三维模型数据
          <br>
          osgb
        </div>
      </div>
      <div class="detail">
        <div class="button" @click="skip('osgbTo3dtiles')">
          osgb格式转换、压缩
          <br>
          3dtiles
        </div>
      </div>
    </div>
    <!-- 点云数据 -->
    <div class="terrain-data">
      <div class="svg-box">
        <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="250">
          <defs>
            <marker id="arrow" markerWidth="10" markerHeight="10" refX="7" refY="2" orient="auto"
              markerUnits="strokeWidth">
              <path d="M0,0 L0,4 L10,2 z" fill="#268DFB" />
            </marker>
          </defs>
          <line x1="300" y1="125" x2="490" y2="125" stroke="#268DFB" stroke-width="3" marker-end="url(#arrow)" />
          <line x1="650" y1="125" x2="835" y2="125" stroke="#268DFB" stroke-width="3" marker-end="url(#arrow)" />
        </svg>
      </div>
      <div class="title">点云数据</div>
      <div class="sort">
        <div class="type">
          点云数据
          <br>
          las/laz
        </div>
      </div>
      <div class="detail">
        <div class="button" @click="skip('pointCloud')">
          点云切片、压缩
          <br>
          pnts
        </div>
      </div>
    </div>
    <!-- 单体化三维模型 -->
    <div class="terrain-data">
      <div class="svg-box">
        <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="250">
          <defs>
            <marker id="arrow" markerWidth="10" markerHeight="10" refX="7" refY="2" orient="auto"
              markerUnits="strokeWidth">
              <path d="M0,0 L0,4 L10,2 z" fill="#268DFB" />
            </marker>
          </defs>
          <line x1="300" y1="125" x2="490" y2="125" stroke="#268DFB" stroke-width="3" marker-end="url(#arrow)" />
          <line x1="650" y1="130" x2="835" y2="170" stroke="#268DFB" stroke-width="3" marker-end="url(#arrow)" />
          <line x1="650" y1="125" x2="835" y2="120" stroke="#268DFB" stroke-width="3" marker-end="url(#arrow)" />
          <line x1="650" y1="120" x2="835" y2="65" stroke="#268DFB" stroke-width="3" marker-end="url(#arrow)" />
        </svg>
      </div>
      <div class="title">单体化三维模型</div>
      <div class="sort">
        <div class="type">
          单体化三维模型
          <br>
          shp/obj/osgb
        </div>
      </div>
      <div class="detail">
        <div class="button" @click="skip('whiteMold')">
          白模数据处理
        </div>
        <div class="button" @click="skip('beCommonModel')">
          通用模型处理
        </div>
        <div class="button" @click="skip('objTo3dtiles')">
          模型格式转换、压缩
          <br>
          3dtiles
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },
  methods: {
    // 页面跳转
    skip (name) {
      this.$router.push(`/${name}`)
    },
  },
  created () { },
  mounted () { }
};
</script>
<style lang="less" scoped>
.model-lightweight {
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  &::-webkit-scrollbar {
    display: none;
    /* Webkit浏览器下隐藏滚动条 */
  }


  .terrain-data {
    width: 1200px;
    height: 250px;
    background: rgba(4, 11, 20, 0.63);
    border: 1px solid rgba(22, 93, 202, 0.6);
    border-radius: 10px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    margin: auto;
    margin-bottom: 10px;

    .svg-box {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      pointer-events: none;
    }

    .title {
      width: 100px;
      text-align: center;
      padding: 5px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      background: rgba(11, 56, 105, 0.35);
      border: 1px solid rgba(22, 93, 202, 0.5);
      color: #fff
    }

    .sort {
      width: 150px;
      height: 200px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      border-radius: 4px;
      background: rgba(4, 11, 20, 0.63);

      .type {
        text-align: center;
        border-radius: 4px;
        width: 100px;
        color: #fff;
        padding: 3px;
        background: rgba(11, 56, 105, 0.35);
        border: 1px solid rgba(22, 93, 202, 0.5);
      }
    }

    .detail {
      width: 150px;
      height: 200px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;

      .button {
        text-align: center;
        width: 150px;
        background: rgba(15, 54, 101, 0.6);
        border-radius: 6px;
        border: 1px solid rgba(152, 192, 253, 0.6);
        color: #fff;
        padding: 3px;
        font-size: 14px;
        cursor: pointer;

        &:hover {
          background: #004AA5;
        }
      }
    }
  }
}
</style>